<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js元素操作</title>
    <link rel="stylesheet" href="../static/调试.svg" type="image/x-icon">
</head>
<body>
<!--定位元素、修改内部的html内容、设置与删除属性、设置css样式、创建并新增元素-->
    <div id="d1" class="c1">Hello, World!</div>
    <div id="d3" class="c1">Hello, Django!</div>

<script>
    //定位元素
    let divEle = document.getElementsByTagName("div")
    console.log(divEle)

    let divEle1 = document.getElementById("d1")
    console.log(divEle1)

    let divEle2 = document.getElementsByClassName("c1")
    console.log(divEle2)

    //修改内部的html内容
    divEle1.innerHTML = "测试用例1"

    //设置与删除属性
    divEle1.setAttribute("id","d2")
//    divEle1.removeAttribute("id")

    //设置css样式
    divEle1.style = "color:blue;background:#FFEFD5"

    //创建并新增元素
    let div = document.createElement("div")
    div.innerHTML = "测试用例2"
    let d1Ele = document.getElementById("d2")
    d1Ele.appendChild(div)

    let d3Ele = document.getElementById("d3")
    d1Ele.insertBefore(div,d3Ele)


</script>
</body>
</html>